<!--
 * @Author       : Sayolit
 * @Date         : 2023-01-08 12:25:43
 * @LastEditors  : Sayolit
 * @LastEditTime : 2023-03-12 15:02:56
 * @FilePath     : apiPage.vue
 * @Description  : 
 * Copyright 2023 Sayolit, All Rights Reserved. 
 * 2023-01-08 12:25:43
-->
<script setup>
	import * as testApi from '../../apis/testApi.js'
	import { Picture as IconPicture } from '@element-plus/icons-vue'
	import apiPageLeftNav from '@/components/apiPageLeftNav/apiPageLeftNav.vue'

	// 不同api结果数组
	const WaifuResData = ref([])
	const MirlKoiResData = ref([])

	const scrollbarRef = ref()

	const store = useStore()

	const currentIndex = computed(() => {
		return store.state.exampleStore.currentIndex
	})

	// 当前传参
	const currentParam = computed(() => {
		return store.state.exampleStore.currentParam
	})

	// /**
	//  * @func: loadMore
	//  * @description: 加载更多
	//  * @return {*}
	//  * @example:
	//  */
	const loadMore = () => {
		if (currentIndex.value == 1) {
			var type =
				store.state.exampleStore.currentActiveNameArr.indexOf('sfw') != -1
					? 'sfw'
					: 'nsfw'

			console.log(type)

			testApi
				.waifuApi(type, currentParam.value)
				.then((res) => {
					console.log(res)
					WaifuResData.value = WaifuResData.value.concat(res.files)
				})
				.catch((err) => {
					console.log(err)
				})
		} else if (currentIndex.value == 2) {
			testApi
				.mirlKoiApi(currentParam.value)
				.then((res) => {
					console.log(res)
					MirlKoiResData.value = MirlKoiResData.value.concat(res.pic)
				})
				.catch((err) => {
					console.log(err)
				})
		}
	}

	const scroll = (scrollInfo) => {
		// console.log(scrollInfo) // {scrollTop: 500, scrollLeft: 0}
	}

	onMounted(() => {
		// testApi
		// 	.waifuApi()
		// 	.then((res) => {
		// 		WaifuResData.value = WaifuResData.value.concat(res.files)
		// 	})
		// 	.catch((err) => {
		// 		console.log(err)
		// 	})
	})

	// 换类别，换api监听
	watch(
		() => currentParam.value,
		(n, o) => {
			console.log(n, o)
			if (currentIndex.value == 1) {
				WaifuResData.value.length = 0
				var type =
					store.state.exampleStore.currentActiveNameArr.indexOf('sfw') != -1
						? 'sfw'
						: 'nsfw'

				console.log(type)

				testApi
					.waifuApi(type, n)
					.then((res) => {
						console.log(res)
						WaifuResData.value = WaifuResData.value.concat(res.files)
					})
					.catch((err) => {
						console.log(err)
					})
			} else if (currentIndex.value == 2) {
				MirlKoiResData.value.length = 0
				testApi
					.mirlKoiApi(n)
					.then((res) => {
						console.log(res)
						MirlKoiResData.value = MirlKoiResData.value.concat(res.pic)
					})
					.catch((err) => {
						console.log(err)
					})
			}
			setTimeout(() => {
				// 回到顶部定位div，无大小不占位
				var location_div = document.querySelector('.scroll-location_div')
				if (location_div) {
					// 平滑
					location_div.scrollIntoView({
						behavior: 'smooth',
					})
				} else {
					// 滚动条回到顶部(不平滑)
					scrollbarRef.value.setScrollTop(0)
				}
			}, 1500)
		}
	)
</script>
<template>
	<div class="api-main">
		<el-scrollbar
			ref="scrollbarRef"
			@scroll="scroll"
			style="height: 100%; width: 100%"
		>
			<!-- 左侧导航栏 -->
			<apiPageLeftNav :menus="store.state.exampleStore.menus"></apiPageLeftNav>
			<!-- 展示框 -->
			<div
				class="right-content"
				:style="{
					paddingLeft: store.state.exampleStore.isCollapseMenu
						? '4.875rem'
						: '',
				}"
			>
				<!-- 回到顶部定位div -->
				<div class="scroll-location_div"></div>
				<!-- 这个element-image组件记得得加上key值不然无法渲染 -->
				<div class="api-show_div" v-infinite-scroll="loadMore">
					<el-image
						lazy
						v-if="currentIndex == 1"
						v-for="(r, index) in WaifuResData"
						:key="r"
						:src="r"
						alt=""
						:preview-src-list="WaifuResData"
						:hide-on-click-modal="true"
						close-on-press-escape
						infinite
						zoom-rate
						:z-index="99"
						:initial-index="index"
					>
						<template #placeholder>
							<div class="image-slot">
								Loading<span class="dot">...</span>
							</div> </template
						><template #error>
							<div class="image-slot">
								<el-icon><icon-picture /></el-icon>
							</div>
						</template>
					</el-image>
					<el-image
						lazy
						v-if="currentIndex == 2"
						v-for="(r, index) in MirlKoiResData"
						:key="r"
						:src="r"
						alt=""
						:preview-src-list="MirlKoiResData"
						:hide-on-click-modal="true"
						close-on-press-escape
						infinite
						zoom-rate
						:z-index="99"
						:initial-index="index"
					>
						<template #placeholder>
							<div class="image-slot">
								Loading<span class="dot">...</span>
							</div> </template
						><template #error>
							<div class="image-slot">
								<el-icon><icon-picture /></el-icon>
							</div>
						</template>
					</el-image>
				</div>
			</div>
		</el-scrollbar>
	</div>
</template>
<style scoped lang="less">
	// 滚动条样式
	::-webkit-scrollbar {
		// width: 10px;
		// height: 16px;
	}
	::-webkit-scrollbar-thumb {
		background-color: #87ceeb !important;
	}
	.api-main {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;

		.el-scrollbar-view {
			display: flex;
			flex-direction: row;
		}

		.right-content {
			padding-left: 210px;
			padding-top: 5rem;
			min-height: 100vh;
			margin-bottom: 50px;
			background-color: #f5f7f9;
			transition: padding-left 0.3s ease-in-out;

			// 用于平滑滚动的定位div
			.scroll-location_div {
				position: relative;
				top: -4.7rem;
				width: 0px;
				height: 0px;
				z-index: -999;
			}

			.api-show_div {
				border-radius: 15px;
				padding-top: 25px;
				width: 98%;
				background-color: white;
				display: flex;
				flex-direction: row;
				justify-content: center;
				flex-wrap: wrap;
				// 图片css
				.el-image {
					height: 450px;
					width: 270px;
					flex-grow: 0;
					flex-shrink: 0;
					margin: 8px;

					> img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						user-select: none;
						-webkit-user-select: none;
					}
					.image-slot {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 100%;
						background: var(--el-fill-color-light);
						color: var(--el-text-color-secondary);
						font-size: 24px;
						font-family: 'Fredoka One';

						.el-icon {
							font-size: 4em;
						}
					}
					.dot {
						animation: dot 2s infinite step-start;
						overflow: hidden;
						font-family: simsun; /*固定字体避免设置的宽度无效*/
						display: inline-block;
						width: 1.5em;
						overflow: hidden;
					}
					@keyframes dot {
						/*动态改变显示宽度, 但始终让总占据空间不变, 避免抖动*/
						0% {
							width: 0;
							margin-right: 1.5em;
						}
						33% {
							width: 0.5em;
							margin-right: 1em;
						}
						66% {
							width: 1em;
							margin-right: 0.5em;
						}
						100% {
							width: 1.5em;
							margin-right: 0;
						}
					}
				}
			}
		}
	}
</style>